<template>
    <div class="page">
        <template v-if="teamId">
            <div class="team_info box" v-if="teamInfo.id">
                <div class="flex mar-b10">
                    <p class="team_title flex-1">{{teamInfo.teamName}}</p>
                    <div class="links">
                        <span @click="inviting">邀请</span>
                        <span @click="$navigate.to('/pages/team/member')">成员</span>
                        <span v-if="isOwner" @click="editTeamFn('open')">修改</span>
                        <span v-else @click="exitTeam" style="color:red" class="fw-bold">退出</span>
                        <div v-if="teamInfo.applyCnt" class="point">{{teamInfo.applyCnt}}</div>
                    </div>
                </div>
                <p class="fs24 color-999 mar-b5">成员：{{teamInfo.teamUserCnt}}</p>
                <div class="des">{{teamInfo.teamDes}}</div>
            </div>
            <div class="share_data box">
                <div class="tabs flex">
                    <div class="full pad-l30 color-main fs34 fw-bold flex-center">合计</div>
                    <div class="date flex">
                        <p v-for="(i, idx) in timeTabs" 
                            @click="chooseTimeTab(i.value)"
                            :key="idx" 
                            :class="{ active: i.value === actTimeTab }">{{ i.label }}</p>
                    </div>
                </div>
                <div class="num_box">
                    <div class="item" @click="actNum = '1'">
                        <image src="/static/images/icon-num.webp" mode="" />
                        <span>发表数</span>
                        <p>{{totalNums.dynamicCnt}}</p>
                    </div>
                    <div class="item" @click="actNum = '1'">
                        <image src="/static/images/icon-share.webp" mode="" />
                        <span>转发数</span>
                        <p>{{totalNums.shareCnt}}</p>
                    </div>
                    <div class="item" @click="actNum = '1'">
                        <image src="/static/images/icon-beishare.png" mode="" />
                        <span>被转发</span>
                        <p>{{totalNums.beiShareCnt}}</p>
                    </div>
                    <div class="item" @click="actNum = '1'">
                        <image src="/static/images/icon-views.png" mode="" />
                        <span>阅读数</span>
                        <p>{{totalNums.beiViewCnt}}</p>
                    </div>

                    <div class="item" @click="actNum = '2'">
                        <image src="/static/images/icon-gxq.png" mode="" />
                        <span>感兴趣</span>
                        <p>{{totalNums.gxqiewCnt}}</p>
                    </div>
                </div>
                <!-- <div class="detail">
                    <div class="detail_box flex">
                        <div v-if="actNum == '1'" class="triangle triangle_1"></div>
                        <div v-if="actNum == '2'" class="triangle triangle_2"></div>
                        <div class="flex-1 flex-column flex-center"> 
                            <span>聊天/群聊</span> 
                            <p>{{ ['', shareData.shareQlCnt, shareData.shareQlNum][actNum] }}</p>
                        </div>
                        <div class="flex-1 flex-column flex-center">
                            <span>朋友圈</span>
                            <p>{{ ['', shareData.sharePyqCnt, shareData.sharePyqNum][actNum] }}</p>
                        </div>
                    </div>
                </div> -->
            </div>
            <!-- <div class="member_list">
                <div class="member_item" @click="$navigate.to('/pages/team/articleList?viewerId=' + item.viewerId)" 
                    v-for="(item, index) in shareUserList" :key="index">
                    <div class="avator">
                        <image :src="item.headImg" mode="" />
                    </div>
                    <div class="detail">
                        <div class="flex">
                            <p class="flex-1"> {{item.userName}} </p>
                            <em>{{item.optype}}</em>
                        </div>
                        <span class="overflow">分享：{{item.title}}</span>
                    </div>
                    <i class="icon-arrow-right color-999"></i>
                </div>
                <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
            </div> -->
            <div class="user_list">
                <div class="tr thead">
                    <div>团员</div>
                    <div>发表数</div>
                    <div>转发数</div>
                    <div>被转发</div>
                    <div>阅读数</div>
                    <div>感兴趣</div>
                    <div></div>
                </div>
                <!-- <div class="tr tbody total">
                    <div class="user"> 合计 </div>
                    <div>{{totalNums.dynamicCnt}}</div>
                    <div>{{totalNums.shareCnt}}</div>
                    <div>{{totalNums.beiShareCnt}}</div>
                    <div>{{totalNums.beiViewCnt}}</div>
                    <div>{{totalNums.gxqiewCnt}}</div>
                    <div></div>
                </div> -->
                <div class="tr tbody" 
                    @click="$navigate.to(`/pages/custom/dayReport?actTimeTab=${actTimeTab}&userId=${item.userId}&teamId=${item.teamId}`)"
                    v-for="(item, index) in shareUserList" :key="index">
                    <div class="user">
                        <div class="avator">
                            <image :src="item.headImg" mode="" />
                        </div>
                        <p> {{item.userName}} </p>
                    </div>
                    <div>{{item.dynamicCnt}}</div>
                    <div>{{item.shareCnt}}</div>
                    <div>{{item.beiShareCnt}}</div>
                    <div>{{item.beiViewCnt}}</div>
                    <div>{{item.gxqiewCnt}}</div>
                    <div> <i class="fs22 color-ccc icon-arrow-right"></i> </div>
                </div>
                <pub-list-end :loading="scroll.loading" :max="scroll.max" :noData="scroll.noData"></pub-list-end>
            </div>

            <pub-fast-date-picker v-show="false" ref="fastDatePicker"></pub-fast-date-picker>
        </template>
        <div class="no_team" v-else>
            <div @click="editTeamFn('open')" class="add_btn">创建团队</div>
            <!-- <div class="add_btn">加入团队</div> -->
        </div>

        <pub-lo-popup 
            title="团队信息" 
            ref="teamEdit" 
            type="bottom" 
            :showBtn="false">
            <div class="edit_menu_popup">
                <div class="cell">
                    <div class="cell_item">
                        <span class="label">团队名称</span>
                        <div class="value">
                            <input type="text" v-model="editTeam.teamName" placeholder="请输入团队名称" placeholder-class="placeholder">
                        </div>
                    </div>
                    <div class="cell_item">
                        <span class="label">团队描述</span>
                        <div class="value">
                            <textarea type="text" v-model="editTeam.teamDes" placeholder="请输入团队描述" placeholder-class="placeholder"></textarea>
                        </div>
                    </div>
                </div>
                <div class="btns">
                    <div class="save_btn btn" @click="editTeamFn('confirm')">保存</div>
                </div>
            </div>
        </pub-lo-popup>

        <pub-lo-popup 
            title="邀请成员" 
            ref="selectShareType" 
            type="bottom" 
            :showBtn="false">
            <div class="flex-center">
                <div class="w300 flex-center flex-column" @click="showInviteCode">
                    <i class="fs60 color-ccc icon-qrcode"></i>
                    <span class="mar-t10"> 扫码分享 </span>
                </div>
                <div class="flex-1"></div>
                <div class="w300 flex-center flex-column" @click="showShareMaskFn">
                    <i class="fs60 color-ccc icon-fenxiang"></i>
                    <span class="mar-t10"> 分享链接 </span>
                </div>
            </div>
        </pub-lo-popup>
        <pub-lo-popup 
            title="二维码邀请成员" 
            ref="inviteCodeRef" 
            type="center" 
            :showBtn="false">
            <div class="invite_code h500 flex-center">
                <div class="code w400 h400">
                    <image class="wfull hfull" :src="inviteCode" mode="" />
                </div>
            </div>
        </pub-lo-popup>

        <div class="share_mask" v-if="showShareMask" @click="showShareMask = false">
            <div>
                点击 “...” 分享
                <i class="icon-fenxiang"></i>
            </div>
        </div>



        
    </div>
</template>
<script>
import { mapState } from 'vuex';
import { createQRcode } from '@/utils/draw'
import { getTeamInfo, getTeamShareCnt, getTeamShareUsers, editTeamInfo, editJoinTeam } from '@/request/team'
export default {
    data() {
        return {
            isOwner: false, // 是否是群主
            teamId: '',
            teamInfo: {},

            editTeam: {
                teamId: '',
                teamDes: '',
                teamName: '',
            },

            searchTime: [],
            actTimeTab: '00',
            timeTabs: [
                { label: '今日', value: '00' },
                { label: '昨日', value: '01' },
                { label: '上周', value: '03' },
                { label: '近30天', value: '07' }
            ],

            // actNum: '1',
            // shareData: {
            //     sharePyqCnt : 1,
            //     sharePyqNum : 2,
            //     shareQlCnt : 3,
            //     shareQlNum : 4,
            // },

            shareUserList: [],
            scroll: {
                page: 1,
                size: 30,
                loading: false,
                max: false,
                noData: false,
            },

            showShareMask: false,
            inviteCode: ''

        }
    },
    computed: {
        ...mapState({
            userInfo: state => state.user.userInfo
        }),
        totalNums() {
            let total = {
                dynamicCnt: 0, //发表数
                shareCnt: 0, //转发数
                beiShareCnt: 0, //被转发
                beiViewCnt: 0, //阅读数
                gxqiewCnt: 0, //感兴趣
            }
            this.shareUserList.forEach(item => {
                total.dynamicCnt += (+item.dynamicCnt)
                total.shareCnt += (+item.shareCnt)
                total.beiShareCnt += (+item.beiShareCnt)
                total.beiViewCnt += (+item.beiViewCnt)
                total.gxqiewCnt += (+item.gxqiewCnt)
            })
            return total
        }
    },
    onLoad() {
        if(this.userInfo.teamId) {
            this.teamId = this.userInfo.teamId
            this.getTeamInfo()
            this.chooseTimeTab(this.actTimeTab)
            this.initShareConfig()
        }
    },
    onShow() {
        if(this.teamInfo.id) {
            this.getTeamInfo()
        }
    },
    methods: {
        getTeamInfo() {
            getTeamInfo({
                teamId: this.teamId
            }).then(res => {
                this.teamInfo = res.data
                this.isOwner = res.data.userId == this.userInfo.userId
            })
        },
        chooseTimeTab(e) {
            this.$nextTick(() => {
                this.actTimeTab = e
                if(e == 'all') {
                    this.searchTime = []
                } else {
                    this.searchTime = this.$refs.fastDatePicker.getFormatDate(e)
                }
                this.onRefresh()
                // this.getData()
            })
        },
        // getData() {
        //     getTeamShareCnt({
        //         startTime: this.searchTime[0] ? this.searchTime[0] + ' 00:00:00' : void 0,
        //         endTime: this.searchTime[1] ? this.searchTime[1] + ' 23:59:59' : void 0,
        //     }).then(res => {
        //         this.shareData = res.data
        //     })
        // },
        getShareUsersList(complete) {
            getTeamShareUsers({
                startTime: this.searchTime[0] ? this.searchTime[0] + ' 00:00:00' : void 0,
                endTime: this.searchTime[1] ? this.searchTime[1] + ' 23:59:59' : void 0,
                pageIndex: this.scroll.page,
                pageSize: this.scroll.size,
            },{ complete }).then(res => {
                this.shareUserList = res.data.data
                // this.shareUserList = this.scroll.page == 1 ? res.data.list : this.shareUserList.concat(res.data.list)
                // this.scroll.max = this.shareUserList.length >= res.data.total
                // this.scroll.noData = res.data.total == 0
            })
        },
        // 重头第一页刷新列表
        onRefresh() {
            this.scroll.loading = true
            this.scroll.max = false
            this.scroll.noData = false
            this.scroll.page = 1
            this.shareUserList = []
            this.getShareUsersList(() => {
                this.scroll.loading = false;
                uni.stopPullDownRefresh()
            })
        },
        // 滚动到底部加载
        onInfinite() {
            if(this.scroll.loading || this.scroll.max) return
            this.scroll.loading = true
            this.scroll.page += 1
            this.getShareUsersList(() => {
                this.scroll.loading = false
            })
        },
        

        editTeamFn(type) {
            if(type == 'open') {
                this.editTeam.teamName = this.teamInfo.teamName
                this.editTeam.teamDes = this.teamInfo.teamDes
                this.editTeam.teamId = this.teamInfo.id || void 0
                this.$refs.teamEdit.open()
            } else if(type == 'confirm') {
                editTeamInfo({
                    teamId: this.editTeam.teamId,
                    teamName: this.editTeam.teamName,
                    teamDes: this.editTeam.teamDes
                }).then(res => {
                    this.$refreshUserInfo()
                    if(!this.editTeam.teamId) {
                        this.teamId = res.data.teamId
                        this.chooseTimeTab(this.actTimeTab)
                    }
                    this.$interact.toast(res.msg)
                    this.getTeamInfo()
                    this.$refs.teamEdit.close()
                })
            }
        },
        initShareConfig() {
            this.$wxConfig().then(() => {
                let shareData = {
                    title: this.userInfo.userName + '邀请您加入' + this.teamInfo.teamName, // 分享标题
                    desc: this.teamInfo.teamDes,
                    link: this.getShareLink(), // 分享链接
                }
                jWeixin.onMenuShareTimeline({ ...shareData, })
                jWeixin.onMenuShareAppMessage({ ...shareData, })
            })
        },
        inviting() {
            this.$refs.selectShareType.open()
        },
        getShareLink() {
            return location.origin + '/pages/team/join?id=' + this.teamId + '&shareUserId=' + this.userInfo.userId
        },
        async showInviteCode() {
            this.inviteCode = await createQRcode(this.getShareLink())
            this.$refs.selectShareType.close()
            this.$refs.inviteCodeRef.open()
        },
        showShareMaskFn() {
            this.showShareMask = true
            this.$refs.selectShareType.close()
        },
        exitTeam() {
            this.$interact.modal({
                title: '提示',
                content: '是否退出团队？',
                showCancel: true,
            }).then(action => {
                if(action.confirm) {
                    editJoinTeam({
                        opType: '02',
                        teamId: this.teamId,
                    }).then(res => {
                        this.$navigate.back()
                    })
                }
            })
        }
        
    }
}
</script>
<style lang="less" scoped>
    .no_team{
        width: 100%;
        height: 100%;
        .align(center, column);
        .add_btn{
            width: 500rpx;
            height: 80rpx;
            color: #FFF;
            background: @mainColor;
            border-radius: 45rpx;
            .align(center);
            margin-bottom: 20rpx;
        }
    }
    .page{
        // padding-top: 20rpx;
    }
    .box{
        width: 100%;
        border-radius: 10rpx;
        background: #fff;
        margin: 0 auto;
        padding: 20rpx 30rpx;
        // box-shadow: 0 0 10rpx #ccc;

    }
    .title{
        color: #999;
        padding: 10rpx 30rpx;
        margin-top: 20rpx;
    }
    .team_info{
        padding: 30rpx 40rpx;
        position: relative;
        .team_title{
            font-size: 36rpx;
            font-weight: bold;
        }
        .des{
            color: #666;
            font-size: 28rpx;
            line-height: 40rpx;
        }
        .links{
            font-size: 26rpx;
            span{
                margin-left: 20rpx;
                color: @mainColor;
            }
        }
        .point{
            position: absolute;
            top: 18rpx;
            left: 620rpx;
            color: #fff;
            padding: 0 10rpx;
            height: 32rpx;
            font-size: 24rpx;
            border-radius: 18rpx;
            .align(center);
            background: #e02e42;
            z-index: 20;
        }
    }

    .share_data{
        margin-top: 20rpx;
        padding: 10rpx;
        .tabs{
            background: #fff;
            top: 0;
            .date{
                justify-content: flex-end;
                flex: 1;
                p{
                    height: 100%;
                    line-height: 60rpx;
                    padding: 0 20rpx;
                    font-size: 32rpx;
                    color: #999;
                    &.active{
                        font-weight: 700;
                        color: #333;
                        position: relative;
                        &::after{
                            content: "";
                            position: absolute;
                            bottom: -10rpx;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 30%;
                            height: 10rpx;
                            background: @mainColor;
                        }
                    }
                }
            }
            .more{
                font-weight: 700;
                color: #333;
            }
        }
        .num_box{
            width: 100%;
            background: #fff;
            padding: 20rpx 0;
            .align(h-space-around);
            .item{
                width: 200rpx;
                height: 180rpx;
                .align(center, column);
                image{
                    width: 60rpx;
                    height: 60rpx;
                    margin-bottom: 10rpx;
                    .overflow;
                }
                span{
                    width: 100%;
                    font-size: 26rpx;
                    margin-bottom: 10rpx;
                    color: #666;
                    text-align: center;
                }
                p{
                    color: #007aff;
                    font-size: 42rpx;
                    font-weight: bold;
                    line-height: 42rpx;
                }
            }
        }
        // .detail{
        //     background: #fff;
        //     .detail_box{
        //         width: 660rpx;
        //         height: 160rpx;
        //         background: #f3f3f3;
        //         margin: 0 auto;
        //         border-radius: 20rpx;
        //         position: relative;
        //         p{
        //             font-size: 46rpx;
        //             line-height: 50rpx;
        //             font-weight: bold;
        //             margin-top: 10rpx;
        //         }
        //     }
        //     .triangle {
        //         width: 0;
        //         height: 0;
        //         position: absolute;
        //         top: -20rpx;
        //         border-bottom: 20rpx solid #f3f3f3;
        //         border-left: 20rpx solid transparent;
        //         border-right: 20rpx solid transparent;
        //         &.triangle_1{
        //             left: 160rpx;
        //         }
        //         &.triangle_2{
        //             left: 460rpx;
        //         }
        //     }
        // }
    }
    // .member_list{
    //     width: 100%;
    //     margin-top: 20rpx;
    //     background: #fff;
    //     .member_item{
    //         width: 100%;
    //         padding: 20rpx 30rpx;
    //         border-bottom: 1px solid #eee;
    //         display: flex;
    //         .avator{
    //             margin-right: 20rpx;
    //             width: 100rpx;
    //             height: 100rpx;
    //             flex-shrink: 0;
    //             image{
    //                 width: 100%;
    //                 height: 100%;
    //             }
    //         }
    //         .detail{
    //             flex: 1;
    //             height: 100rpx;
    //             width: 1px;
    //             display: flex;
    //             flex-direction: column;
    //             justify-content: space-around;
    //             p{
    //                 font-size: 32rpx;
    //                 font-weight: bold;
    //             }
    //             em{
    //                 font-size: 24rpx;
    //                 color: #ccc;
    //                 padding-right: 20rpx;
    //             }
    //             span{
    //                 font-size: 28rpx;
    //                 color: #666;
    //             }
    //         }
            
    //     }
    // }


    .user_list {
        .tr {
            display: flex;
            min-height: 80rpx;
            >div{
                flex: 1;
                &:nth-child(1) {
                    flex: none;
                    width: 240rpx;
                }
                &:nth-last-child(1) {
                    flex: none;
                    width: 30rpx;
                }
                .align(center);
            }
        }
        .thead{
            background: #ddd;
            font-size: 26rpx;
        }
        .tbody{
            background: #fff;
            border-bottom: 1px solid #e5e5e5;
            height: 100rpx;
            .user{
                width: 100%;
                display: flex;
                padding: 10rpx;
                .avator{
                    margin-right: 10rpx;
                    width: 60rpx;
                    height: 60rpx;
                    flex-shrink: 0;
                    image{
                        width: 100%;
                        height: 100%;
                    }
                }
                p{
                    flex :1;
                    width: 1;
                    font-size: 28rpx;
                    font-weight: bold;
                    .overflow()
                }
            }
            
        }
        .total{
            height: 70rpx;
            color: @mainColor;
            font-weight: bold;
        }

    }

    .edit_menu_popup{
        .cell{
            .cell_item{
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                min-height: 90rpx;
                border-bottom: 1rpx solid #eee;
                padding: 10rpx 20rpx;
                font-size: 28rpx;
                .label{
                    width: 120rpx;
                    color: #666;
                    margin-right: 20rpx;
                }
                .value{
                    flex: 1;
                    input{
                        width: 100%;
                    }
                    textarea{
                        width: 480rpx;
                        height: 200rpx;
                        border: 1rpx solid #eee;
                        border-radius: 10rpx;
                        margin: 10rpx 0;
                        padding: 10rpx;
                    }
                }
            }
        }
        .btns{
            display: flex;
            padding: 30rpx 30rpx 0;
            justify-content: space-between;
            .btn{
                color: #FFF;
                background: @mainColor;
                border-radius: 45rpx;
                .align(center, column);
                flex: 1;
                height: 80rpx;
            }
        }
    }

    .share_mask{
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        position: fixed;
        left: 0;
        top: 0;
        div{
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            font-size: 34rpx;
            i{
                width: 100rpx;
                height: 100rpx;
                .align(center);
                transform: rotate(-90deg) rotateX(180deg);
            }
        }
    }


</style>
